<template>
	<view class="container">
		<!-- 活动规则 -->
		<view class="rules-box" @tap="goRules">
			<u-image width="150rpx" height="52rpx" src="/static/images/a50.png"></u-image>
		</view>
		<!-- 导航栏 -->
		<!-- <geek-header whiteback bgColor="transparent" title="邀请有礼" title-color="#fff"></geek-header> -->
		<view class="top-box">
			<view class="" :style="{height: menuTopHeight + 'px'}"></view>
			<view class="menu-box" :style="{height: menuHeight + 'px'}">
				<u-icon name="arrow-left" color="#fff" size="20" @click="goBack"></u-icon>
				<view class="navigate-title">邀请有礼</view>
			</view>
		</view>
		<view class="bg">
			<u-image width="100vw" height="1507rpx" src="/static/images/b2.jpg"></u-image>
		</view>
		
		<view class="content-box">
			<view class="count-box">
				<view class="bg">
					<u-image width="100%" height="430rpx" src="/static/images/b3.png"></u-image>
				</view>
				<!-- 图标 -->
				<view class="icon-list">
					<view class="icon-item">
						<u-image width="100rpx" height="100rpx" src="/static/images/a24.png"></u-image>
						<view class="">分享好友</view>
					</view>
					<view class="icon-item">
						<u-image width="16rpx" height="16rpx" src="/static/images/a27.png"></u-image>
					</view>
					<view class="icon-item">
						<u-image width="100rpx" height="100rpx" src="/static/images/a25.png"></u-image>
						<view class="">好友成功下单</view>
					</view>
					<view class="icon-item">
						<u-image width="16rpx" height="16rpx" src="/static/images/a27.png"></u-image>
					</view>
					<view class="icon-item">
						<u-image width="100rpx" height="100rpx" src="/static/images/a26.png"></u-image>
						<view class="">获得现金奖励</view>
					</view>
				</view>
				<!-- 余额 -->
				<view class="amount-box">
					<view class="amount-item">
						<text>当前余额</text>
						<text class="weight">￥18.6</text>
					</view>
					<view class="amount-item">
						<text>邀请人数</text>
						<text class="weight">186</text>
					</view>
				</view>
			</view>
			
			<!-- 邀请按钮 -->
			<view class="invite-btns">
				<view class="btn1">
					<u-button throttleTime="1000" :customStyle="{height: '86rpx', width: '460rpx', letterSpacing: '.1rem'}" :hairline="false" type="mini" shape="circle" color="linear-gradient(327deg, #FFC45B 0%, #FFECA8 100%)">
						<text style="color: #8A5600;letter-spacing: .2rem;font-weight: bold;">邀请好友</text>
					</u-button>
				</view>
				<view class="btn2">
					<u-button throttleTime="1000" :customStyle="{height: '86rpx', width: '200rpx', boxShadow: '0rpx 4rpx 34rpx 1rpx #4460D1', letterSpacing: '.1rem'}" :hairline="false" type="mini" shape="circle" color="linear-gradient(151deg, #DBE2FF 0%, #96ABFC 100%)" @click="goWithdrawal">
						<text style="color: #2944CE;letter-spacing: .2rem;font-weight: bold;">提现</text>
					</u-button>
				</view>
			</view>
		</view>
		
		<!-- 列表 -->
		<view class="invite-list">
			<view class="tabs">
				<u-tabs itemStyle="height: 100rpx;width: 50%;font-size: 34rpx;'" lineColor="#8A5600" activeStyle="color: #8A5600;" lineWidth="136rpx" inactiveStyle="color: #DCB176;" :current="current" :list="tabsList" @click="tabsChange"></u-tabs>
			</view>
			<scroll-view scroll-y="true" style="height: 600rpx;">
				<view class="scroll-list-box" v-if="current == 0">
					<view class="item" v-for="(item, i) in 10" :key="i">
						<u-avatar src="/static/images/avatar.png" size="100rpx"></u-avatar>
						<view class="context">
							<view class="name-time">
								<view>李佳臻</view>
								<view class="time">2023-11-28  12:26:13</view>
							</view>
							<view class="tip">成功邀请好友，获得10元现金。</view>
						</view>
					</view>
				</view>
				<view class="scroll-list-box" v-else-if="current == 1">
					<view class="item1" v-for="(item, i) in 10" :key="i">
						<view class="state-box">
							<view class="left">提现至银行卡 尾号4004</view>
							<!-- 三种状态颜色 -->
							<view class="default success fail">审核中</view>
						</view>
						<view class="time-box">
							<view class="left">99.99</view>
							<view class="right">2023-11-28  12:26:13</view>
						</view>
						<view class="record-tip">
							银行卡已被冻结不能提现
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import { useHeight } from '@/hooks/useMenuHeight'
	const { menuHeight, menuTopHeight } = useHeight()
	const current = ref(0)
	const tabsList = ref([
		{name: '收益明细'},
		{name: '提现记录'},
	])
	const tabsChange = (e) => {
		current.value = e.index
	}
	const goWithdrawal = () => {
		uni.navigateTo({
			url: '/mine/invite/withdrawal'
		})
	}
	const goRules = () => {
		uni.navigateTo({
			url: '/mine/agreement/rules'
		})
	}
	const goBack = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		padding-top: 870rpx;
		.rules-box {
			position: absolute;
			right: 0;
			top: 483rpx;
			z-index: 99;
		}
		.top-box {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 99;
		}
	}
	.menu-box {
		padding-left: 26rpx;
		color: #fff;
		display: flex;
		align-items: center;
		.navigate-title {
			color: #fff;
			font-size: 36rpx;
			color: #FFFFFF;
			margin-left: 18rpx;
		}
	}
	.bg {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.content-box {
		padding: 0 34rpx;
	}
	.count-box {
		position: relative;
		padding: 59rpx 47rpx 71rpx;
		.icon-list {
			@include between(100%);
			padding: 0 30rpx;
			padding-bottom: 88rpx;
			border-bottom: 1rpx dashed #DCB176;
			.icon-item {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				
				& > view {
					position: absolute;
					left: 50%;
					white-space: nowrap;
					word-wrap: break-word;
					word-break: break-word;
					bottom: -50rpx;
					transform: translateX(-50%);
					z-index: 99;
					font-size: 26rpx;
					color: #A79F9C;
				}
			}
		}
		.amount-box {
			margin-top: 42rpx;
			@include between(100%);
			.amount-item {
				font-size: 26rpx;
				color: #A79F9C;
				.weight {
					font-weight: bold;
					font-size: 50rpx;
					color: #8A5600;
					margin-left: 26rpx;
				}
			}
		}
	}
	.invite-btns {
		margin-top: 50rpx;
		@include between(100%);
		.btn1 {
			width: 460rpx;
			box-shadow: 0rpx 4rpx 34rpx 1rpx #4460D1;
			border: 2rpx solid #FFA500;
			border-radius: 43rpx;
		}
		.btn2 {
			width: 200rpx;
			border: 2rpx solid #D66A44;
			box-shadow: 0rpx 4rpx 34rpx 1rpx #4460D1;
			border-radius: 43rpx;
		}
	}
	.invite-list {
		margin-top: 40rpx;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		background: #FFFFFF;
		.tabs {
			border-bottom: 1rpx dashed #DCB176;
		}
		.scroll-list-box {
			padding: 0 34rpx;
			.item {
				@include center(100%);
				border-bottom: 1rpx dashed #DCB176;
				padding: 30rpx 0;
				.context {
					flex: 1;
					margin-left: 22rpx;
					font-size: 30rpx;
					color: #8A5600;
					.name-time {
						@include between(100%);
						margin-bottom: 8rpx;
						.time {
							color: #DCB176;
							font-size: 24rpx;
						}
					}
					.tip {
						font-size: 28rpx;
					}
				}
			}
			.item1 {
				border-bottom: 1rpx dashed #DCB176;
				padding: 30rpx 0;
				.state-box {
					@include between(100%);
					margin-bottom: 12rpx;
					.left {
						font-size: 30rpx;
						color: #8A5600;
					}
					.default {
						color: #F0960F;
					}
					.success {
						color: #3DBE42;
					}
					.fail {
						color: #E43535;
					}
				}
				.time-box {
					@include between(100%);
					.left {
						font-size: 34rpx;
						color: #8A5600;
					}
					.right {
						color: #DCB176;
						font-size: 24rpx;
					}
				}
				.record-tip {
					color: #E43535;
					margin-top: 10rpx;
				}
			}
		}
		
	}
</style>
